<script setup lang="js">
    import * as echarts from 'echarts'
    import { onMounted,reactive,ref } from 'vue';
    import axios from 'axios';
    let options = reactive([])
    const myEcharts = ref();
    function echartsInit(){
        const mc = echarts.init(myEcharts.value,"light",{
            width: 600,
            height: 500    
        })
        var option = {
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: [],
                type: 'bar'
                }
            ]
        };
        const xdata = reactive([]) 
        const ydata = reactive([])
        for(let index=0;index<options.length;index++){
            let obj = options[index];
            xdata.push(obj.year);
            ydata.push(obj.perCapitaGrain)
        }
        option.xAxis.data = xdata
        option.series[0].data = ydata
        console.log(ydata);
        mc.setOption(option);
    }
    function getData(){
        //-:获取服务器数据
        axios.get('/api/queryNagrPcap')
            .then((response)=>{
                console.log(response.data)
                if(response.data.code==200){
                    console.log(response.data.data)
                    options = response.data.data;
                    //=:初始化图表
                    echartsInit();
                }
            })
            
    }
    onMounted(()=>{
        getData();
    })
 </script>
 <template>
     <dv-border-box-1 style="text-align: center;">
    <h1 style="font-size: 25px;" class="b">全国历年各地人均粮食产量</h1>
    <div ref="myEcharts"></div>
    </dv-border-box-1>
 </template>
 <style lang="css" scoped>
 .b{
    position: absolute;
    left: 140px;
    top: 15px;
}
 </style>